---
title: Migration depuis Gridsome
description: Conseils pour la migration d'un projet Gridsome existant vers Astro
sidebar:
  label: Gridsome
type: migration
stub: true
framework: Gridsome
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { CardGrid, LinkCard } from '@astrojs/starlight/components';

[Gridsome](https://gridsome.org) est un générateur de sites statiques open-source basé sur Vue et GraphQL.

## Principales similitudes entre Gridsome et Astro

Gridsome et Astro partagent certaines similitudes qui vous aideront à migrer votre projet :

- Gridsome et Astro sont tous deux des générateurs de sites statiques Javascript modernes avec des [structures de fichiers de projet similaires](/fr/basics/project-structure/#répertoires-et-fichiers).

- Gridsome et Astro utilisent tous deux un dossier `src/` pour les fichiers de votre projet et un [dossier spécial `src/pages/` pour le routage basé sur les fichiers](/fr/basics/astro-pages/). La création et la gestion des pages de votre site devraient vous sembler familières.

- Astro possède [une intégration officielle pour l'utilisation des composants Vue](/fr/guides/integrations-guide/vue/) et prend en charge [l'installation des paquets NPM](/fr/guides/imports/#paquets-npm), dont plusieurs pour Vue. Vous serez en mesure d'écrire des composants d'interface utilisateur Vue et de conserver tout ou partie de vos composants Vue et dépendances Gridsome existants.

- Astro et Gridsome vous permettent tous deux d'utiliser un [CMS headless, des APIs ou des fichiers Markdown pour les données](/fr/guides/data-fetching/). Vous pouvez continuer à utiliser votre système préféré de création de contenu et conserver votre contenu existant.

## Principales différences entre Gridsome et Astro

Lorsque vous recréez votre site Gridsome avec Astro, vous remarquerez quelques différences importantes :

- Gridsome est une application monopage (SPA) basée sur Vue. Les sites Astro sont des applications multi-pages construites à l'aide de [composants `.astro`](/fr/basics/astro-components/), mais peuvent également prendre en charge [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/fr/guides/framework-components/) et et des modèles HTML bruts.

- En tant que SPA, Gridsome utilise `vue-router` pour le routage SPA, et `vue-meta` pour gérer `<head>`. Dans Astro, vous créerez des pages HTML séparées et contrôlerez le `<head>` de votre page directement, ou dans un [composant de mise en page](/fr/basics/layouts/).

- [Données de fichiers locaux](/fr/guides/imports/) : Gridsome utilise GraphQL pour récupérer les données de vos fichiers de projet. Astro utilise les importations ESM et l'aide [`import.meta.glob()`](/fr/guides/imports/#importmetaglob) pour importer des données à partir de fichiers de projets locaux. Les ressources distantes peuvent être chargées en utilisant l'API standard `fetch()`. GraphQL peut être optionnellement ajouté à votre projet, mais n'est pas inclus par défaut.

## Passer de Gridsome à Astro

Pour convertir un blog Gridsome en Astro, commencez par notre modèle de démarrage de thème de blog, ou explorez d'autres thèmes de blog communautaires dans notre [vitrine de thèmes](https://astro.build/themes/).

Vous pouvez passer un argument `--template` à la commande `create astro` pour démarrer un nouveau projet Astro avec l'un de nos modèles de démarrage officiels. Vous pouvez aussi [démarrer un nouveau projet à partir de n'importe quel dépôt Astro existant sur GitHub](/fr/install-and-setup/#utiliser-un-thème-ou-un-modèle-de-démarrage).

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template blog
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template blog
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template blog
    ```
    </Fragment>
  </PackageManagerTabs>

Apportez vos fichiers Markdown existants (ou MDX, avec notre intégration optionnelle) comme contenu pour [créer des pages Markdown ou MDX](/fr/guides/markdown-content/).

La structure de projet de Gridsome étant similaire à celle d'Astro, vous pourrez peut-être copier plusieurs fichiers existants de votre projet au même endroit dans votre nouveau projet Astro. Cependant, les structures des deux projet ne sont pas identiques. Vous souhaiterez peut-être examiner [la structure de projet d'Astro](/fr/basics/project-structure/) pour voir quelles sont les différences.

Étant donné qu'Astro interroge et importe vos fichiers locaux différemment de Gridsome, vous souhaiterez peut-être lire comment charger des fichiers en utilisant [`import.meta.glob()`](/fr/guides/imports/#importmetaglob) pour comprendre comment travailler avec vos fichiers locaux.

Pour convertir d'autres types de sites, tels qu'un site de portfolio ou de documentation, consultez d'autres modèles de démarrage officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod.

## Ressources communautaires

<CardGrid>

  <LinkCard title="Migration de Gridsome vers Astro (Anglais)" href="https://fyodor.io/migration-from-gridsome-to-astro/"/>

  <LinkCard title="Bonjour Astro ! (Anglais)" href="https://thamas.hu/astro-hello"/>

</CardGrid>

:::note[Vous avez une ressource à partager ?]
Si vous avez trouvé (ou créé !) une vidéo ou un article de blog utile sur la conversion d'un site Gridsome en site Astro, [ajoutez-le à cette liste](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/migrate-to-astro/from-gridsome.mdx) !
:::
